<template>
  <div class="portfolio">

    <!-- 背景 -->
    <section class="projects-bg">
      <img class="bg-image" :src="bgImg" alt="background" />

      <!-- 内容区域 -->
      <div class="projects-content">

        <!-- 个人信息 -->
        <div class="personal-info">
          <h2>{{ personal.name }}</h2>
          <p>{{ personal.title }}</p>
          <p>{{ personal.intro }}</p>
        </div>

        <h3>Projects</h3>

        <!-- 项目列表 -->
        <div class="projects-list">
          <div
              v-for="p in projects"
              :key="p.id"
              class="project-card"
          >
            <div class="project-image">
              <img v-if="p.image" :src="p.image" :alt="p.title"/>
              <div v-else class="placeholder">项目截图占位</div>
            </div>
            <h4>{{ p.title }}</h4>
            <p class="desc">{{ p.desc }}</p>
            <div class="tags">
              <span v-for="t in p.tags" :key="t" class="tag">{{ t }}</span>
            </div>

            <!-- 项目详细介绍 -->
            <div class="project-detail">
              <h5>技术栈</h5>
              <ul>
                <li v-for="tech in p.tech" :key="tech">{{ tech }}</li>
              </ul>
              <h5>功能</h5>
              <ul>
                <li v-for="f in p.features" :key="f">{{ f }}</li>
              </ul>
            </div>

          </div>
        </div>

      </div>
    </section>

  </div>
</template>

<script setup>
import bgImg from '@/assets/blackground.png';
import proj1 from '@/assets/1.png';
import proj2 from '@/assets/2.png';
import proj3 from '@/assets/3.png';

const personal = {
  name: "Cin Cin",
  title: "前端开发工程师 / 全栈开发",
  intro: "热爱编程，喜欢使用 Vue 和 Spring Boot 开发全栈应用，熟悉前端组件化开发和后端接口设计。"
};

const projects = [
  {
    id: 1,
    title: "房屋租赁管理系统",
    desc: "基于 Spring Boot + Vue 的全栈房屋租赁平台",
    tags: ["Java","Spring Boot","MySQL"],
    image: proj1,
    tech: ["Java", "Spring Boot", "Vue 3", "MySQL", "Element Plus"],
    features: [
      "房源信息管理",
      "租赁合同管理",
      "用户权限控制",
      "消息通知功能"
    ]
  },
  {
    id: 2,
    title: "宠物健康管理系统",
    desc: "面向宠物主的健康与生活管理系统",
    tags: ["Java", "Spring", "Thymeleaf"],
    image: proj2,
    tech: ["Java", "Spring", "Thymeleaf", "MySQL", "Bootstrap"],
    features: [
      "宠物信息管理",
      "健康数据记录",
      "提醒和通知功能",
      "用户账户管理"
    ]
  },
  {
    id: 3,
    title: "交通流量可视化",
    desc: "交通流量预测与可视化前端展示",
    tags: ["Python", "Flask", "Echarts"],
    image: proj3,
    tech: ["Python", "Flask", "Echarts", "Pandas", "Numpy"],
    features: [
      "交通数据采集与处理",
      "流量预测模型展示",
      "可视化图表展示",
      "交互式数据筛选"
    ]
  }
];
</script>

<style scoped>
.projects-bg {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.5;
}

.projects-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

.personal-info {
  text-align: center;
  margin-bottom: 60px;
}

.personal-info h2 {
  font-size: 36px;
  font-weight: bold;
}

.personal-info p {
  font-size: 16px;
  margin: 5px 0;
}

.projects-content h3 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 40px;
  text-align: center;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}

.projects-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.project-card {
  flex: 1 1 300px;
  max-width: 350px;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
}

.project-image {
  height: 150px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.project-image .placeholder {
  color: #aaa;
  font-size: 14px;
}

.desc {
  margin: 10px 0;
}

.tags {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.tag {
  background: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.project-detail {
  margin-top: 10px;
  text-align: left;
}

.project-detail h5 {
  margin: 5px 0;
  font-weight: bold;
}

.project-detail ul {
  margin: 0 0 10px 20px;
  padding: 0;
  list-style-type: disc;
}
</style>
